/**
 * #info
 *
 * @author   lulinguo
 * @createTime   2018/06/13
 * @updateTime   2018/06/13
 * @description 模态框组件
 */
import config from '../../../config/config.js'
import Icon from '../../basic/icon/index.vue'
import iButton from '../../basic/button/index.vue'
import TransferDom from '../../../directives/transfer-dom'
import Locale from '../../../mixins/locale'
import Emitter from '../../../mixins/emitter'
import ScrollbarMixins from '../../../mixins/mixins-scrollbar'
// console.log(Popup)
const prefixCls = config.prefix + '-modal'

/**
 * #item
 *
 * @type aty-modal
 * @cn  模态框
 * @stPlugin true
 * @stContainer true
 */
const module = {
  name: config.prefix + '-modal',
  mixins: [Locale, Emitter, ScrollbarMixins],
  components: { Icon, iButton },
  directives: { TransferDom },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    closable
     * @cn      可关闭
     * @type    boolean
     * @bind    must
     * @value   true
     * @description 是否可关闭
     */
    closable: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name    mask-closable
     * @cn      遮罩是否可关闭
     * @type    boolean
     * @value   false
     * @description  遮罩是否可关闭
     */
    maskClosable: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    title
     * @cn      标题
     * @type    string
     * @value   title标题
     * @description  标题
     */
    title: {
      type: String
    },
    /**
     * #property
     *
     * @name    width
     * @cn      宽度
     * @type    string,number
     * @value   520
     * @description  宽度
     */
    width: {
      type: [Number, String],
      default: 520
    },
    /**
     * #property
     *
     * @name    ok-text
     * @cn      ‘确认’按钮文字
     * @type    string
     * @description   ‘确认’按钮文字
     */
    okText: {
      type: String
    },
    /**
     * #property
     *
     * @name    cancel-text
     * @cn      ‘取消’按钮文字
     * @type    string
     * @description  ‘取消’按钮文字
     */
    cancelText: {
      type: String
    },
    /**
     * #property
     *
     * @name    loading
     * @cn      加载中状态
     * @type    boolean
     * @value   false
     * @description  加载中状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    class-name
     * @cn      加在wrapper 上的class
     * @type    string
     * @description   加在wrapper 上的class
     */
    className: {
      type: String
    },
    /**
     * #property
     *
     * @name    footer-hide
     * @cn      是否隐藏底部
     * @type    boolean
     * @value   false
     * @description  是否隐藏底部
     */
    footerHide: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    scrollable
     * @cn      是否可滚动
     * @type    boolean
     * @value   false
     * @description  是否可滚动
     */
    scrollable: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    transitionNames
     * @cn      动画效果名称
     * @type    array
     * @bind    must
     * @value   [ease, fade]
     * @description  动画效果名称
     */
    transitionNames: {
      type: Array,
      default () {
        return ['ease', 'fade']
      }
    },
    /**
     * #property
     *
     * @name    transfer
     * @cn      弹出内容拼在body上
     * @type    boolean
     * @bind    must
     * @value   true
     * @description  弹出内容拼在body上
     */
    transfer: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name    refreshContent
     * @cn      打开时刷新窗口内容
     * @type    boolean
     * @value   false
     * @description  打开时刷新窗口内容
     */
    refreshContent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      wrapShow: false,
      showHead: true,
      buttonLoading: false,
      visible: this.value,
      jsControlContent: false, // js控制显示内容,如果为true则内部用iframe链接url显示
      showUrl: '', // iframe的url
      iframeStyle: '', // iframe样式
      iframeId: '', // iframe id
      showBody: true
    }
  },
  computed: {
    wrapClasses () {
      return [
                `${prefixCls}-wrap`,
                {
                  [`${prefixCls}-hidden`]: !this.wrapShow,
                  [`${this.className}`]: !!this.className
                }
      ]
    },
    maskClasses () {
      return `${prefixCls}-mask`
    },
    classes () {
      return `${prefixCls}`
    },
    mainStyles () {
      const style = {}

      const width = parseInt(this.width)
      const styleWidth = {
        width: width <= 100 ? `${width}%` : `${width}px`
      }

      Object.assign(style, styleWidth)

      return style
    },
    localeOkText () {
      if (this.okText === undefined) {
        return this.t('i.modal.okText')
      } else {
        return this.okText
      }
    },
    localeCancelText () {
      if (this.cancelText === undefined) {
        return this.t('i.modal.cancelText')
      } else {
        return this.cancelText
      }
    }
  },
  methods: {
    open () {
      this.visible = true
      if (this.refreshContent) {
        this.showBody = true
      }
    },
    close () {
      this.visible = false
      if (this.refreshContent) {
        this.showBody = false
      }
      this.$emit('input', false)
      /**
       * #event
       *
       * @name on-close
       * @cn 关闭弹框事件
       * @body console.log('close');
       * @description 关闭弹框事件
       */
      this.$emit('on-close')
    },
    mask () {
      if (this.maskClosable) {
        this.close()
      }
    },
    handleWrapClick (event) {
      // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
      const className = event.target.getAttribute('class')
      if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask()
    },
    cancel () {
      /**
       * #event
       *
       * @name on-cancel
       * @cn 点击‘取消’按钮事件
       * @body console.log('cancel');
       * @description 点击‘取消’按钮事件
       */
      this.$emit('on-cancel')
      this.close()
    },
    ok () {
      if (this.loading) {
        this.buttonLoading = true
      }
      /**
       * #event
       *
       * @name on-ok
       * @cn 点击‘确认’按钮是事件
       * @body console.log('hello world');
       * @description 点击‘确认’按钮事件
       */
      this.$emit('on-ok')
    },
    EscClose (e) {
      if (this.visible && this.closable) {
        if (e.keyCode === 27) {
          this.close()
        }
      }
    },
    animationFinish () {
      this.$emit('on-hidden')
    }
  },
  mounted () {
    if (this.visible) {
      this.wrapShow = true
    }

    let showHead = true

    if (this.$slots.header === undefined && !this.title) {
      showHead = false
    }

    this.showHead = showHead

    // ESC close
    document.addEventListener('keydown', this.EscClose)
  },
  beforeDestroy () {
    document.removeEventListener('keydown', this.EscClose)
    this.removeScrollEffect()
  },
  watch: {
    value (val) {
      this.visible = val
    },
    visible (val) {
      if (val === false) {
        this.buttonLoading = false
        this.timer = setTimeout(() => {
          this.wrapShow = false
          this.removeScrollEffect()
        }, 300)
      } else {
        if (this.timer) clearTimeout(this.timer)
        this.wrapShow = true
        if (!this.scrollable) {
          this.addScrollEffect()
        }
      }
      this.broadcast(config.prefix + '-table', 'on-visible-change', val)
    },
    loading (val) {
      if (!val) {
        this.buttonLoading = false
      }
    },
    scrollable (val) {
      if (!val) {
        this.addScrollEffect()
      } else {
        this.removeScrollEffect()
      }
    },
    title (val) {
      if (this.$slots.header === undefined) {
        this.showHead = !!val
      }
    }
  }
}

export default module
